<template>
	<view class="main">
		<view class="header">
			<view class="left">
				<view class="title">
					{{vipData.name}}
				</view>
				<view class="text">
					{{vipData.intro}}，{{vipData.comment}}
				</view>
			</view>
			<view class="right">
				<view class="price">
					￥{{vipData.money}}
				</view>
				<view class="old-price">
					原价 ￥99
				</view>
			</view>
		</view>
		<view class="other">
			<view class="title">
				<text class="line"></text> 详细信息
			</view>
			<view class="content">
				包含的产品：精选题库600题、文字技巧、错题汇总、模拟考试、免费在线解答十道题（在线解答由专业老师讲解）、教学视频（教学视频由专业老师讲解）（购买时间期限：一个月）
			</view>
		</view>
		<view class="other">
			<view class="title">
				<text></text> 购买须知
			</view>
			<view class="content">
				包含的产品：精选题库600题、文字技巧、错题汇总、模拟考试、免费在线解答十道题（在线解答由专业老师讲解）、教学视频（教学视频由专业老师讲解）（购买时间期限：一个月）
			</view>
		</view>
		<view class="buy">
			<view class="price">
				商品总价<text class="money">￥{{vipData.money}}</text>
			</view>
			<view class="confirm" @click="buy">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	import {
		buyVip,
		confirmOrder
	} from "@/api/index.js"
	export default {
		data() {
			return {
				vipData: '',
				orderId: ''

			};
		},
		onLoad(option) {

			this.vipData = JSON.parse(option.item)
			console.log(option.item)
		},
		methods: {
			buy() {
				confirmOrder().then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: "/pages/mall/order?vipData=" + JSON.stringify(this.vipData) +
								"&orderId=" + res.data.order_id
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.main {
		background-color: #EDEDED;
	}

	.header {
		padding: 26rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 26rpx;

		.left {
			flex: 1;

			.title {
				font-size: 30rpx;
				color: #333;
			}

			.text {
				color: #646464;
				font-size: 28rpx;
				margin-top: 20rpx;
			}
		}

		.right {
			margin-left: 40rpx;
			text-align: center;

			.price {
				font-size: 32rpx;
				color: #3FA2F7;
			}

			.old-price {
				color: #9A9A9A;
				font-size: 28rpx;
				position: relative;
			}

			.old-price::after {
				content: '';
				width: 100%;
				height: 1px;
				position: absolute;
				left: 0;
				top: 50%;
				background-color: #A1A1A1;
			}
		}

	}

	.other {
		margin-top: 20rpx;
		background-color: #fff;


		.title {
			font-size: 30rpx;
			color: #333;
			padding: 10rpx 0;
			border-bottom: 1px solid #EDEDED;
			padding: 10rpx 26rpx;

			.line {
				width: 1px;
				height: 100%;
				display: inline-block;
			}
		}

		.content {

			color: #646464;
			font-size: 28rpx;
			padding: 26rpx;
			line-height: 40rpx;
		}
	}

	.buy {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		max-width: 500px;

		.price {
			margin-left: 26rpx;
			font-size: 28rpx;
			color: #333;

			.money {
				color: #DE2219;
				margin-left: 10rpx;
				font-weight: 600;
				font-size: 32rpx;
			}
		}

		.confirm {
			width: 200rpx;
			height: 80rpx;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
			background-color: #3187D4;
		}
	}

	@media (min-width:500px) {
		.buy {
			left: 50%;
			margin-left: -250px;
		}
	}
</style>